let mask=document.querySelector('.mask');
let ul = document.querySelector('ul');
let downX=downY=last=0
function enter(){
    downX=event.clientX-mask.offsetLeft
    downY=event.clientY-mask.offsetTop
    mask.addEventListener('mousemove',move)
}
function move(){
    if(+(mask.style.left.substring(0,
        mask.style.left.indexOf('px')))<0){
        mask.style.left=0
        return
    }
    if(+(mask.style.top.substring(0,
        mask.style.top.indexOf('px')))<0){
        mask.style.top=0
        return
    }
    if(+(mask.style.left.substring(0,
        mask.style.left.indexOf('px')))>100){
        mask.style.left=100+'px'
        return
    }
    if(+(mask.style.top.substring(0,
        mask.style.top.indexOf('px')))>100){
        mask.style.top=100+'px'
        return
    }
    mask.style.left=event.clientX-downX+'px'
    mask.style.top=event.clientY-downY+'px'
    //console.log(ul.previousElementSibling.children[0]);
    ul.previousElementSibling.children[0].style.
    transform=`translate(-${(event.clientX-downX)*2}px,
    -${(event.clientY-downY)*2}px)`
    
}
mask.addEventListener('mouseenter',enter)
mask.addEventListener('mouseleave',()=>{
    mask.removeEventListener('mousemovw',move)
})
ul.addEventListener('click',()=>{
    ul.children[last].children[0].classList.remove('active')
    let i=Number(event.target.dataset.index)
    ul.children[i].children[0].classList.add('active')
    last=i
    mask.nextElementSibling.src="./images/cw"+(i+1)+'.png'
    ul.previousElementSibling.children[0].src="./images/cw"+(i+1)+'.png'
})
